
<  >
  excel大问题，中英文转换，表单日期转换
  excel如何转换聘用形式？






  0.写代码套路，先静后动
  <div>
    {/* 写代码套路，先静后动 */}
    1.明确需求，明确目标，（要知道做完的效果是什么?想要什么?)
    如:我要做登录,最终效果,输入账号密码,点击登录,提示登录成功
    2.html+css 要的页面先准备一下(不管js和功能)铺页面
    3.铺数据/该数字键--微调页面文字，有数据要求铺设到页面上
    4.js入场编写交互功能(小布一个个小功能实现)--逻辑(前端先做好)
    5.如果需要调用接口,和后端配合,调用axios请求
  </div>
  1.初始化项目
  <div>  {/* 1.创建分支 git checkout -b reg初始化 */}</div>
  2.login
  <div>
    2.1样式调整
    1.替换logo图标
    2.修改logo背景图
    3. 输入框字体颜色
    4.输入框背景颜色
    5.登录按钮样式
    6.提示文字
    7.错误信息的字体大小（当表单元素的输入验证错误时，它会在相应的表单元素下边出现一个文字说明）
    2.2登录-内容调整
    1.把username替换成mobile,和接口对应上,以及校验规则(utils/validate.js)
    2.把之前的校验登入的接口删掉
    3.去生产环境配置基地址,不可以在(utils下的request修改),在development里改http://ihrm.itheima.net/api
    4.去封装登录接口(api/user),对比接口文档写下参数
    5.导入loginAPI方法到登录页面,登录点击事件调用接口接口
  </div>
  3.解决跨域（本项目解决的办法是代理服务器，vue脚手架里有webpack开发服务器支持，给这个服务器进行配置，让他支持代理转发
  <div>
    1.去vue.config.js里面去新增代理配置proxy
    2.去在development里把之前的基地址进行更改'/api'和上面的proxy的键一样
    3.重启服务器
  </div>
  4.当没有给响应拦截器的时候，就是你登入失败还是成功，后台network都会显示成功200
  <div>
    1.去request里面找到响应拦截器，进行结构拿到data的值，要里面的message和success，因为这两个是判断登入失败还是成功
    2.之后进行判断，这样话，逻辑页面就不会正确错误都是成功200
    3.继续进入登录页面，把发送请求完成，用try+catch捕获错误，
    4.并从elementUI提示错误信息和正确信息
    5.解决获取有效数据代码冗余的问题也就是.data.data
    5.1去request响应拦截器在成功的那一块点数据data
    6.用一种awaitTo获取发送接口错误和正确的方式（详情看awaitTo.js,api/user.js/,views/login/login.js)
  </div>
  5.token持久化
  <div>
    1.在vuex里user存取设置token
    2.在登入页里引用token，并且赋值token
    3.去request的请求拦截器里设置请求头，并把请求头获取出来放到请求拦截器里
    4.去api里创建index.js是为了统一导出接口
    5.引用用户接口
    6.token持久化从auth.js拿到封装的函数,并且设置一个独一无二的token
    7.去user.js取值,设置值
    8.有设置大神的逻辑，具体看代码（login/index.vue，store/modules/user.js)
  </div>
  6.主页
  <div>
    1.在登录页点击登录的时候跳转到主页
    2.去permission.js全局守卫进行判断 有无token，进行登录跳转
    3.路由跳转的进度条
    4.修改左侧的logo图片
    5.修改头部样式和左侧样式
    6.进行用户接口,新增用户接口
    7.在vuex中进行保存数据，新建一个用户信息，进行获取，删除，异步发送请求
    8.在全局守卫进行判断是否有用户名登入
  </div>
  7.token过期失效
  <div>
    1.去request.js在响应器400的地方进行写入，逻辑判断，拿token，删除token，跳转到登录页
  </div>
  8.修改页面右上角的图片
  <div>
    1.去调取接口，接口有参数
    2.vuex里进行逻辑
    3.在gettergs修改，把这个填入进去
    4.去navbar.vue进行填入图片
  </div>
  9.退出登录===未遂退出
  <div>
    1.此项目没有接口，所以只要把存的值删除即可
    2.去点击按钮页进行点击事件退出，清空token，跳转到登录页
    3.未遂地址主要代码route.fullPath
    4.Navbar.vue/
  </div>
  10.路由
  <div>
    1.创建左侧导航栏，8个文件夹，8个vue，8个js，在路由index.js页面进行挂载导入
    2.添加图标svg，之后再每个左侧页面进行小图标添加
    3.激活高亮，在sidebar.scss设置样式
    4.这是标题文字，在promise后置里，之后去get-page-title.js，在之后settings.js
  </div>
  11.组织架构
  <div>
    1.整体卡片布局，找element-ui寻找卡片布局，引入，删除，修改
    2.获取页面信息，调接口，铺数据
    3.铺数据的时候需要嵌套 ，因此用递归，递归在utils/index.js，老师封装好的

    4.创建一个点击的弹框文件夹（views/departments/components)，以及vue（departDialog.vue）
    4.1创建完在引入到主页面（departments/index.vue）导入=挂载
    4.2传送数据子传父，父传子
    4.3让弹框显示数据，掉接口，父传子数据，遍历弹框里的下拉菜单
    4.4表单确认，调接口，子传父，更新页面

    5.编辑弹框+回显数据
    5.1获取当前点击那行的id
    5.2弹框打开
    5.3掉接口,但因先弹框,后数据,因此是异步执行的,所以要用this.$nextTick(()=>{里面写接口})
    5.4之后进行回显,最简答的回显,就是在组件内上面用ref获取子组件,并进行赋值
    5.6当编辑和新增都是用于一个按钮，因此设置一个状态，之后进行判断，对于编辑的调接口

    6.删除
    6.1调接口
    6.2进行弹框
    6.3优化删除,有孩子的默认的不让删除,

    7.添加一级部门,表单左上角
    7.1添加绑定事件，但是是第三方的所以要在原生事件.native,并且用的绑定事件和子级的绑定事件一致，但是不需要传递id
    7.2在事件中进行判断,并且：子级的pid=父级部门的id，而一级的pid=公司部门的id，但是他是空字符串

    8.表单校验
    8.1 给表单设置 rules 属性传入验证规则，给表单设置model属性传入表单数据，给表单中的元素（Form-Item ）设置 prop 属性，设置为需校验的字段名
    8.2手动自定义校验
    8.3为了不让变单code一致，进行自定义校验
    8.4父这边传入格式化数据给子
    8.5进行名字和code不可以相同在添加的时候，进行过滤 map，find
  </div>
  12角色设置
  <div>
    1.铺静态页面
    2.调接口，铺数据,创建一个api接口setting.js文件
    3.获取公司的信息，需要公司id，所谓公司id就是用户信息里就有，之前保存到vuex里面了用户信息
    3.1调接口,接口传递id可以调用vuex的id
    3.2在vuex中getters里面写入公司id==companyId: state => state.user.userInfo.companyId 因为是从userInfo拿出来的
    3.3在主页面映射,
    4.角色管理新增角色弹框，弹出弹框,校验,
    5.角色管理确认，掉接口，兜底校验
    6.编辑新增确认按钮，
    6.1调接口,接口有传id
    6.2因为确认按钮包含了新增，和编辑确认，因此给一个状态，区分，并且进行判断
    6.3在给一个id的空对象，因为传递接口需要id
    7.修改页码---页码传递参数，之后进行修改
    8.删除，获取接口，删除id
  </div>
  13员工设置
  <div>
    1.头部创建一个公共组件，进行别的页面进行复用
    2.去main去注册全局
    3.铺页面数据静态的
    4.调接口，铺数据
    5.聘用形式
    6.工号列排序
    7.封装弹框，父传子，子传父
    8.表单校验
    9.弹框里的聘用形式你
    10弹框里的部门树形数据
    10.1把之前调用的部门api拿到员工页面，并树形结构的转换方法导入
    10.2在接口里面转换树形结构，声明一个空值，为了装树形结构弄好的数据
    10.3传给子
    10.4子给部门一个事件，输入框聚焦事件，让树形结构显示
    10.5定义一个树形结构是否隐藏，
    10.6针对树形结构进行v-if
    10.7在树形结构的标签上绑定一个node-click这是节点被点击时的回调
    10.8进行回显针对部门，上面的节点事件，在节点事件写事件，回显
    11弹框确定按钮
    11.1调接口，
    11.2子传父，接口在页面写，数据在子页面
  </div>
  14excel表格
  <div>
    1.复制vue-element-admin 中的excel，放入到components/UploadExcel(拖拽点击)
    2.进行安包npm install xlsx file-saver -S，npm install script-loader -S -D
    3.进行全局注册在components/index，在挂载到main
    4.创建views/excel/Index
    5.路由进行配置(静态)
    6.在员工页面进行点击事件针对你导入
    7.对于excel中文，变成英文看excel/index里面
    8.时间转换，在md封装时间到utils/index,在导入到excel页面进行导入，判断是否是转正日期和入职日期
    9.调接口导入excel
    10导出也是用vue-element-admin 中的vendor
    11也是中英文转换详情看views/employees/index
  </div>
  15员工详情
  <div>
    1.创建views/employees/detail.vue,在路由填写，点击查看跳转
    2.把员工详情的每个页面进行封装，在统一到上面的出口===创建=导入=挂载=放页面
    3.对封装的登录用户进行页面渲染，调接口，点击首页回显
    4.修改保存密码，校验，调接口，兜底校验
    5.个人详情布局，针对格式日期有误，进行修改采用原生js
    5.1针对图片，封装一个图片，elemnt有这个===创建 src\components\UploadImg\index.vue 组件
    5.2进行全局注册在components
    5.3在user页面进行挂载
    5.4在封装图片的页面要自定义属性进行上传
    5.5npm i cos-js-sdk-v5 --save安包
    5.6格式化日期
    5.7图片在公共组件中进行，预览，并且添加腾讯云的我要上传的图片
    5.8进行组件传，子传父传带http的储存
    5.9父组件进行事件
    5.10调接口保存数据之前已经有了这个接口
    5.11把接口直接铺设到主页，并且进行判断，还是针对日期，必须是字符串才可以保存
    5.12图片地址进行回显
    5.13父传过来在公共组件内接收props
    5.14进行监听外面传来的props(外面那个其实就是上面子传父的，但是图片地址是都传给父了)
    6图片进度条
    6.1去element找进度条放到公共组件里
    6.2定义两个变量---图片上传和图片显示
    6.3进行在自定义上传的时候，让他显示进度条，到传完给父页面的时候让他显示关闭进度条
    6.4进行判断是否
    7.封装全局图片组件,新建组件 src\components\ImageHolder\index.vue
    7.2全局注册
    7.3在员工页面的头像进去一个插槽，并且全局注册放在这里
    7.4在业务组件中封装组件

  </div>
  16权限分配
  <div>
    1.src\views\employees\components\assignRoleDialog.vue 创建弹框组件
    2.在主页面导入注册，点击事件，给一个变量显示弹框开和关
    3.在assignRoleDialog.vue 里子传父确定和取消按钮键传值让他关闭
    4.调接口员工的，之前封装过，直接拿来用，在主页面上调，并声明一个变量，用来储存这个接口的数据，进行给父传子，上面tem标签声明
    5.去element找复选框粘贴到assignRoleDialog.vue
    6.assignRoleDialog.vue 这边接收的进行v-for循环,这里有一个点，就是后台让返回的是字符串id，不是名字，但是页面要显示的是名字
    因此，把名字写在外面用花括号
    7.点击每一个分配角色进行回显
    8.调接口，之前调过，写在主页，并且个两个变量，id和当前点击的数据的回显，这个写完的接口要在分配权限哪里调用，因为不是只执行一次，
    分配权限哪里还有id
    9.在tempalate进行父传子
    10子接收父亲传过来的回显进行侦听变化，以及铺template
    11.数据铺设和默认选择，调接口，在逻辑页面写接口的，子传父，传出来变化的选择的值，给父亲，进行点击事件
    12权限点-静态结构搭建
    12.1权限页面搭建src\views\permission\index.vue
    12.2接口封装,定义方法，请求数据
    12.3表格树形控件，之前有封装过在utils/index，引入到逻辑页面在
    13权限新增弹框
    13.1新建src/views/permission/components/perDialog.vue文件, 定义弹框表格需要使用的数据
    13.2在定义表格中向逻辑页面进行传入值，弹框关闭
    13.3接收定义表格传来的进行点击事件
    13.4为了区分添加权限(1级)和添加(2级)，定义两个变量，并且事件都写同一个后面要带上这个添加的
    13.5事件上给定义的两个变量赋值
    14添加权限成功
    14.1定义弹框组件，进行兜底校验，发给父亲在确认按钮中校验，发送
    14.2调接口，写在逻辑页面上，并且接收子传过来的数据
    14.3进行回显，逻辑页面用一个状态区分是否是编辑还是不编辑
    14.4用refs获取定义弹框的变量
    14.5调接口在逻辑页面
    14.6弹框确认按钮，分编辑和不是编辑，调接口在逻辑页面，进行if判断
    15需求：新增：名字：要加的是自己的权限名字，不能和子级们同名，权限标识，是和所有人比，唯一不能重复
    编辑：名字：不能和点击这项同级重名，不包含自己（排除），权限标识：是和所有人比，唯一不能重复，不包含自己（排除）
    15.1进行自定义校验在定义弹框组建中,逻辑页面和定义弹框组件写
    16删除，获取接口，传id
    17角色分配权限点
    17.1创建 src\views\setting\assignPermission.vue 子组件
    17.2导入逻辑页面注册,给一个变量让他显示，点击的时候
    17.3调接口，逻辑页面用，并且进项父传子，弹框转树形
    17.4弹框权限回显（用了element的setCheckedKeys内置属性），调接口，逻辑页面写数据，父传子
    17.5点击弹框会出现闪烁（原因：发送请求需要时间，上次未清除），因此给定义弹框组件在取消和确认的时候，把上一次的清空掉
    17.6保存点击的权限，调接口，并且用element的getCheckedKeys内置方法，传递给父，父点击事件

  </div>
  17动态路由，分配权限，对应职位看到相对应的页面
  <div>
    {/* 显示效果： （此前的效果只显示一个首页，不能手切路由） */}
    1.在路由页面，把动态路由给导入到permission里,用路由官方的内置动态路由
    {/* 显示效果： （效果可以手切路由有显示） */}
    2.在vuex里的app页面给一个动态路由标记，之后再getters里面添加这个动态路由标记
    3.在去permission页面在进行判断是否有这个动态路由标记，把内置的放到这个判断里面
    {/* 显示效果（左侧侧边栏全部显示出来） */}
    4.在vuex里新建一个permission.js，就是针对动态路由储存的,之后再index页面导入挂载
    5.在全局路由守卫取动态路由值，permission中取出vuex里的动态路由
    6.在布局侧边栏中也要取出在vuex中的路
    {/* 看到我的用户信息的权限左侧菜单栏几个 有问题登录别的显示的一模一样左侧*/}
    7.在vuex里的getters取出user信息里的用户角色字段roles.menus
    8.在permission中进行过滤筛选当前用户信息和动态路由
    {/* 用户信息显示左侧侧边栏  有问题登录以后要闪烁一下动态就404*/}
    9.在vuex里的app中把动态路由关闭，
    10在vuex里user里清除app的路由
    {/* 用户信息跳入不会出现报错404，但是问题依旧没有解决，还是要刷新才可以看到当前的左侧路由 */}
    11.在路由页面把404注释调
    12.在全局路由里permission里路由push到这个404，只是加到了规则和vuex里就会跳到空白页
    13.并让他next进行path
    {/* 自定义指令实现按钮级控制 */}
    14.按钮进行全局注册创建 src\directive\power.js 文件，在文件内进行全局自定义指定创建
    15.创建 src\directive\index.js 文件，挂载 自定义指定出口
    16去main.js挂载去
    17，去员工页面找到按钮进行自定义的创建
  </div>
  18多语言
  <div>
    {/* 效果可以切换中英文 */}
    1.安装包 npm i vue-i18n@8.22.2
    2.在lang/index导入vue-i18n和element语言配置，全局注册，创建国际化插件的实例，导入多语言设置
    3.在main.js中导出lang，并且vue实例中挂载多语言
    {/* 效果出现 */}
    4.找到 navbar 字段进行公司标题字段设置头部需要改英文，因此在lang/index中添加进去头部英文，和中文英文
    5.之后再navbar使用 vue-i18n 提供的语法进行切换，更改
    {/* 实现动态切换中英文 */}
    6.在 src\components\Lang 中封装多语言组件进行此功能
    7.在components\index.js全局注册
    8.去src\layout\components\Navbar.vue 使用多语言组件并进行样式美化
  </div>
  19全屏
  <div>
    {/* 效果已出现静态没有js交互呢 */}
    1.在 src\components\ScreenFull 中创建全屏组件
    2.在components\index.js全局注册
    3.src\layout\components\Navbar.vue 使用全局组件
    {/* 实现全屏缩放 */}
    4.安包npm i screenfull@5.2.0
    5.在src\components\ScreenFull引入
    6.添加点击事件
    {/* 实现全屏图标切换 */}
    7.在components/ScreenFull/index.vue, 在 data 中新增状态管理数据是针对是否是全屏的
    8。在creact监测这个屏幕辩护
    9.在图标设置三元表达式，进行是true还是false
  </div>

</>

